import React,{Component} from 'react'
import {Row,Col,Menu,Spin,Table} from 'antd'
import LeftMenus from './LeftMenu';
import TableDemo2 from './rightTable'
import reqwest from 'reqwest';
import EditableCell from './EditCell'

import {actionList,addService, updateService,serviceList } from '../../services/serverMana'

class ServerMana extends Component{
    constructor(props){
        super(props)
        this.state ={
            menuArr:[],
            leftMenu:[],
            rightTable:[],
            loading:true,
            selectedRow:[{}],
            selectedRowId:'',
            selectedRowIndex:'',
            isSelected:false,
        }
    }
    componentDidMount(){
        serviceList().then((data) => {
            this.setState({
                loading:false,
                leftMenu:data.data,
                menuArr:data.data
            })
        });
    }
    handleClick(menu){
        this.setState({
            loading:true,
        })
        const q =`{"filters":[{"name":"service_id","val":${menu.key},"op":"=="}],"order_by":[{"field":"display_order","direction":"asc"}]}`
    }

    actionList=(record)=>{
        const q =`{"filters":[{"name":"service_id","val":${record.id},"op":"=="}],"order_by":[{"field":"display_order","direction":"asc"}]}`
        actionList(q).then(data=>{
            this.setState({
                rightTable:data.data,
                loading:false
            })
        })
    }

    resetActionList=()=>{
        this.actionList(this.state.selectedRow[0])
    }

    onRowClcik=(record, index, event)=>{
        this.setState({
            loading:true,
            selectedRow:[record],
            selectedRowId:record.id,
            selectedRowIndex:index,
            isSelected:true
        })
        this.actionList(record)
       
    }
    rowClassName=(record, index,)=>{
        if(this.state.selectedRowIndex === index){
          return 'rowSelected'
        }
        return '';
    }
    onMouseOver = ()=>{
        alert(1)
    }

    handleChange(key, index, value) {
        
                const data = this.state.selectedRow
                data[index][key] = value;
                this.setState({
                    selectedRow:data
                })
            }
    renderColumns(index, key, text) {
        return (<EditableCell
            value={text}
            onChange={value => this.handleChange(key, index, value)}
        />);
    }
    save =(row)=>{
        const data = {...row}
        
        if(data.id){
            updateService(data).then(data=>{
                const arr = [...this.state.menuArr,data.data]
                this.setState({
                    menuArr:arr
                })
                this.clean()
            })
           
        }else{
            addService(data).then(data=>{
                const arr = [...this.state.menuArr,data.data]
                this.setState({
                    menuArr:arr
                })
                this.clean()
            })
        }
    }

    clean =()=>{
        this.setState({
            rightTable:[],
            loading:false,
            selectedRow:[{}],
            selectedRowIndex:'',            
            isSelected:false,
        })
    }

    render(){
        const columns = [
            { title: '', dataIndex: 'display_name' , 
            render: (text, record) => {
              return (
                  <div >
                      {record.display_name}
                  </div>
                )
              
            }},
        ]

        const col = [
            { title: '服务名称',dataIndex: 'service_name',render: (text, record, index) => this.renderColumns(index, 'service_name',text)},
            { title: '显示名称',dataIndex: 'display_name',render: (text, record, index) => this.renderColumns(index, 'display_name',text)},
            { title: '排序',dataIndex: 'display_order',render: (text, record, index) => this.renderColumns(index, 'display_order',text)},
            { title: '描述',dataIndex: 'description',render: (text, record,index) => this.renderColumns(index, 'description',text)},
              { title: '',dataIndex: '',render: (text, record) => {
                  if(this.state.isSelected){
                    return (
                        <div>
                            <a style={{marginRight:'10px'}} onClick={()=>this.save(record)}>保存</a>
                            <a onClick={this.clean}>清空</a>
                        </div>
                      )
                  }
                  return (
                    <a onClick={()=>this.save(record)}>保存</a>
                  )
                
                
              }},
        ]
        return(
            <div className="myContainer" >
            <Spin spinning={this.state.loading}>
                <Row gutter={16}>
                    <Col span={4} >
                    <Table columns={columns} 
                        onRowClick={this.onRowClcik}
                        rowClassName={this.rowClassName}
                        rowKey={record => record.id}
                        dataSource={this.state.menuArr}
                        showHeader={false}
                        pagination={false}
                        bordered
                            />
                    
                    </Col>
                    <Col span={20} >
                        
                            <Table columns={col} 
                            rowKey={record => record.id?record.id:`toptablerow`}
                            dataSource={this.state.selectedRow}
                            pagination={false}
                            bordered
                                />
                            {
                                this.state.isSelected?<TableDemo2 rightTable={this.state.rightTable}
                                selectedRowId={this.state.selectedRowId}
                                resetActionList={this.resetActionList}
                                 />:''
                            }
                            
                        
                    </Col>
                </Row>
            </Spin>
            </div>
        )
    }
}

export default ServerMana
